<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div</title>
    <style>
      /* 内部样式 */
      /* css的选择器 */
      /* 标签选择器：选择当前文档中所有的标签 */
      p{
        width:100px;
        height:100px;
        background-color:blue ;
      }
      /* id选择器：根据id值选择文档中唯一的一个标签 */
      #s1{
          /* color：设置字体颜色 */
        color:red;
          /* 行元素，宽度和高度设置无效 */
        width:100px;
        height:100px;
        background-color:green 
      }
      /* 类选择器：根据元素的class值对文档中的元素进行定位 */
      .my01{
        width:100px;
        height:100px;
        background-color:yellowgreen  
      }
      /* id选择器>类选择器>标签选择 */
      /* #h4id{
        background-color:green;
     } */

     /* .my02{
          background-color: blue;
      } */

      h4{
          background-color: red;
      }

     

      
    </style>
</head>
<body>
    
    <h4 class='my02' id="h4id" >
        基本选择器的优先级
    </h4> 
    <!-- 全局属性是所有HTML元素共有的属性;
       id:定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。(字符和数字组成，不推荐使用纯数字)
       style:含要应用于元素的CSS样式声明。
       class:一个以空格分隔的元素的类名（classes ）列表 
     -->
     <!-- style设置当前元素的样式,只能对当前的元素有效。通常只在测试时使用。 -->
    <div style="width:100px;height:100px;background-color:pink">div元素</div>
    <h1 class="my01 my02">h-1</h1>
    <h2 class="my01">h-2</h2>
    <h3 class="my01">h-3</h3>
     <span id="s1">span标签</span>
     <p>p-1</p>
     <p>p-2</p>
     <p>p-3</p>
     <p>p-4</p>
     <p>p-5</p>

     
    
</body>
</html>